@extends('layouts.admin')
@section('style')
    <style type="text/css">
        .no_done_event tr td:first-child {
            text-align: right;
        }
        .no_done_event tr td:last-child{
            text-align: center;
            color:red;
        }
        .sub_ul{}
        .sub_ul li{float:left;text-align:center;width:25%;height:80px;border-bottom: 1px solid #ececec;border-right:1px solid #ececec;}
        .sub_ul li:first-child{float:left;border-left:1px solid #ececec;width:23.7%;}
        .sub_li_top{padding:10px;}
        .sub_li_top label{font-size:12px;}
        .sub_li_top label:before{content:'\0020';}
        .sub_li_bottom{line-height:30px;border-top:1px solid #ececec;}
        .sub_ul_1 li{float:right;width:49.5%;text-align: center;height:80px;border-right:1px solid #ececec;border-bottom: 1px solid #ececec;}
        .sub_ul_1 li:first-child{float:left;width:48.5%;border-left:1px solid #ececec;}
        .main_table tr td{background: #ffffff;padding:5px;}
         li.top-title{background: #F0F5F9;border:1px solid #ececec;height:30px;line-height:30px;text-align: center;}
        .ul-times{
            padding-bottom:10px;
        }
        .ul-times li{
            width:100px;
            height:40px;
            line-height:40px;
            background: #ececec;
            color:#FFFFFF;
            float:left;
            text-align: center;
            margin-right:2px;
            border:1px solid #ececec;
        }
        .ul-times li.cur{
            background: #FFFFFF;
            color:green;
        }
    </style>
@endsection
@section('content')
    <div class="layui-container" style="width:100%;min-height:600px;">
        <div class="layui-row">
            <div class="layui-col-md12">
                <table class="layui-table main_table" lay-skin="nob" lay-even="none">
                    <colgroup>
                        <col width="40%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                    </colgroup>
                    <tbody>
                        <tr>
                            <td>
                                <ul>
                                    <li class="top-title" style="">今日补单</li>
                                    <li>
                                        <ul class="sub_ul">
                                            <li>
                                                <div class="sub_li_top"><label>成功笔数</label></div>
                                                <div class="sub_li_bottom" id="today_success_num"></div>
                                            </li>
                                            <li>
                                                <div class="sub_li_top"><label>已返佣金</label></div>
                                                <div class="sub_li_bottom" id="today_success_comm"></div>
                                            </li>
                                            <li>
                                                <div class="sub_li_top"><label>进行中</label></div>
                                                <div class="sub_li_bottom" id="today_waiting_num"></div>
                                            </li>
                                            <li>
                                                <div class="sub_li_top"><label>待返佣金</label></div>
                                                <div class="sub_li_bottom" id="today_waiting_comm"></div>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </td>
                            <td>
                                <ul>
                                    <li class="top-title" style="">店铺</li>
                                    <li>
                                        <ul class="sub_ul_1">
                                            <li>
                                                <div class="sub_li_top"><label>店铺</label></div>
                                                <div class="sub_li_bottom" id="shop_num" ></div>
                                            </li>
                                            <li>
                                                <div class="sub_li_top"><label>宝贝</label></div>
                                                <div class="sub_li_bottom" id="goods_num"></div>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </td>
                            <td>
                                <ul>
                                    <li class="top-title" style="">本周补单</li>
                                    <li>
                                        <ul class="sub_ul_1">
                                            <li>
                                                <div class="sub_li_top"><label>数量</label></div>
                                                <div class="sub_li_bottom" id="week_success_num"></div>
                                            </li>
                                            <li>
                                                <div class="sub_li_top"><label>佣金</label></div>
                                                <div class="sub_li_bottom" id="week_success_comm"></div>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </td>
                            <td>
                                <ul>
                                    <li class="top-title" style="">本月补单</li>
                                    <li>
                                        <ul class="sub_ul_1">
                                            <li>
                                                <div class="sub_li_top"><label>数量</label></div>
                                                <div class="sub_li_bottom" id="month_success_num"></div>
                                            </li>
                                            <li>
                                                <div class="sub_li_top"><label>佣金</label></div>
                                                <div class="sub_li_bottom" id="month_success_comm"></div>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-tab layui-tab-brief" lay-filter="tongji">
                <ul class="layui-tab-title">
                    <li class="layui-this">补单情况概况</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <ul class="ul-times">
                            <li class="cur" data-type="1"><a href="javascript:void(0)">一周内</a></li>
                            <li data-type="2"><a href="javascript:void(0)">两周内</a></li>
                            <li data-type="3"><a href="javascript:void(0)">一个月内</a></li>
                        </ul>
                        <div id="memberChart" style="width: 1089px;height: 400px;margin-top:20px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script type="text/javascript" src="{{ asset('js/utils/echarts.min.js') }}"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var memberChart = null;
        var orderChart = null;
        var init_url = "{{ url('initdata') }}";
        var index_tongji = "{{ url('indextongji') }}";
        layui.use(['jquery','form','element','utils','layer'],function(){
            var $ = layui.$,
                element = layui.element,
                URL　= layui.utils.URL,
                layer = layui.layer,
                form = layui.form;
                var load_layer = layer.load();

                URL.get(init_url,{},{
                    success:function(res){
                     if(res.code ==1){
                         var data = res.data;
                         //左边汇总项目
                         $("#today_success_num").html(data.today_success_num);
                         $("#today_success_comm").html(parseFloat(data.today_success_comm).toFixed(2));

                         $("#today_waiting_num").html(data.today_waiting_num);
                         $("#today_waiting_comm").html(parseFloat(data.today_waiting_comm).toFixed(2));

                         $("#shop_num").html(data.shop_num);
                         $("#goods_num").html(data.goods_num);

                         $("#week_success_num").html(data.week_success_num);
                         $("#week_success_comm").html(parseFloat(data.week_success_comm).toFixed(2));

                         $("#month_success_num").html(data.month_success_num);
                         $("#month_success_comm").html(parseFloat(data.month_success_comm).toFixed(2));

                     }
                     layer.closeAll();
                 }})
                memberChart = echarts.init($('#memberChart')[0]);
                element.on("tab(tongji)",function(data){
                    if(data.index==1){
                        $("#orderChart").css({width:'900px'});
                        element.init()
                    }
                })
                var default_option = {
                    tooltip: {  trigger: 'axis'  },
                    grid: {  left: '3%',  right: '4%',  bottom: '15%',  containLabel: true },
                    toolbox: {
                        feature: {  }
                    },
                    yAxis: {
                        type: 'value'
                    }
                };
                $(".ul-times li").click(function(){
                    $(".ul-times li").removeClass('cur');
                    $(this).addClass('cur');
                    var _type = $(this).data('type');
                    memberChart.setOption(_getMemberChartOption(_type));
                })
                // 使用刚指定的配置项和数据显示图表。
                memberChart.setOption(_getMemberChartOption(1));
                function _getMemberChartOption(type){
                    var date=[];
                    var datas=[];
                    var title="";
                    var load_layer = null;
                    URL.get(index_tongji,{type:type},{
                        is_async:1,
                        beforeSend:function(){
                            load_layer = layer.load();
                        },
                        success:function(res){
                            if(res.code==1){
                                date = res.data.dates;
                                datas = res.data.datas;
                                title = res.data.title;
                            }
                        },complete:function(res){
                            layer.close(load_layer);
                        }
                    })
                    var xAxis={
                        xAxis:Object.assign({},default_option.xAxis,{data:date})
                    }
                    default_option.title={
                        text: title+'补单情况统计'
                    }
                    var series =[
                        {
                            name:'补单数量',
                            type:'line',
                            stack: '总量',
                            data:datas
                        }
                    ];
                    var option = Object.assign({},default_option,xAxis,{series:series});
                    return option;
                }
        })
    </script>
@endsection
